<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2024-03-29 10:03:05
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-04-25 16:36:37
 * @FilePath: \cxl-driving-training\src\views\questionManagement\details\Index.vue
-->
<template>
    <div class="page-box-detail details">
        <questionVue type="question" :info="question" />
        <div class="ask-list">
            <h1>
                全部回答<i>（{{ pagination.total }}）</i>
            </h1>
            <template v-for="item in list" :key="item">
                <questionVue type="ask" :info="item" />
            </template>
        </div>
        <!-- 分页 -->
        <paginationVue
            v-if="pagination.total > pagination.pageSize"
            :pagination="pagination"
            @change="onPaginationChange"
            @page-size="onPaginationSize"
        />

        <div class="btn">
            <el-button @click="onCancel">返回</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import questionVue from '../questionComponent/Index.vue'
import { onMounted, reactive, watchEffect } from 'vue'
import { answerist, questionDetailed } from '@/apis/FAQs'
import paginationVue from '@/components/Pagination.vue'
import { routerStore } from '@/store/router.store'
import router from '@/router'
const route = useRoute()
const _routerStore = routerStore()

const question = reactive({
    userAvatar: '',
    phone: '',
    createTime: '',
    questionContent: '',
    problemId: ''
})
// question.userAvatar = route.query?.userAvatar as string
// question.phone = route.query?.phone as string
// question.createTime = route.query?.createTime as string
// question.questionContent = route.query?.questionContent as string
question.problemId = route.query?.id as string

const list: any[] = reactive([])

const pagination = reactive({
    pageNo: 1,
    pageSize: 10,
    total: 0
})

const getData = () => {
    questionDetailed(question.problemId).then(res => {
        if (Number(res.data.code) === 200) {
            question.userAvatar = res.data.result.userAvatar
            question.phone = res.data.result.phone
            question.createTime = res.data.result.createTime
            question.questionContent = res.data.result.content
        }
    })
    answerist({
        problemId: question.problemId,
        current: pagination.pageNo,
        size: pagination.pageSize
    }).then(res => {
        if (Number(res.data.code) === 200) {
            pagination.total = res.data.result.total
            list.length = 0
            res.data.result.records.forEach((item: any) => {
                list.push({
                    userAvatar: item.signUpAvatar,
                    phone: item.signUpPhone,
                    signUp: '已报名' + item.signUpSchool + item.signUpClass,
                    questionContent: item.content,
                    answerImg: item.contentPictures
                })
            })
            console.log('list', list)
        }
    })
}

/**
 * 监听选择的当前分页
 * @param index
 */
const onPaginationChange = (index: number) => {
    pagination.pageNo = index
    getData()
}

/**
 * 监听分页大小的改变
 * @param index
 */
const onPaginationSize = (index: number) => {
    pagination.pageSize = index
    getData()
}

onMounted(() => {
    getData()
})

const onCancel = () => {
    console.log(_routerStore.selectIndex)
    _routerStore.removeHeaderRoute(_routerStore.selectIndex)
    router.push('/FAQs')
}
</script>

<style scoped lang="scss">
.ask-list {
    h1 {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        i {
            color: #999;
        }
    }
}

.btn {
    padding: 32px 0;
    text-align: center;
}
</style>
